<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Movie fenxi</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <style>
        #myChart1, #chart2, #chart3, #chart4 {

            float: left;
        }

        #myChart1 {
            margin-top: 100px;
            margin-left: 100px;
        }

        #chart2{
            margin-left: 100px;
            margin-top: 20px;
        }

    </style>

</head>

<body>
<div id="myChart1" style="width: 1200px;height:1000px;"></div>
<div id="chart2" style="width: 700px;height:500px;"></div>

<div id="chart3" style="width: 950px;height:600px;"></div>
<div id="chart4" style="width: 2400px;height:500px;"></div>

<script type="text/javascript">

    //第一个表
    var myChart = echarts.init(document.getElementById('myChart1'));

    var option = {
        title: {
            text: '影片类型分布',
            subtext: '数据来源于JSON文件',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '影片类型',
                type: 'pie',
                radius: '55%',
                data: [],
                label: {
                    show: true,
                    formatter: '{b}: {c} ({d}%)' // 标签显示格式
                },
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    $(document).ready(function () {

        $.getJSON('../word/job1.json').done(function (data) {
            var totalCount = 0;
            var validData = [];

            // 过滤并计算总数
            data.forEach(function (item) {
                var count = parseFloat(item.count);
                if (!isNaN(count)) { // 确保 count 是一个数字
                    totalCount += count;
                    validData.push({
                        name: item.genre,
                        value: count
                    });
                }
            });

            // 设置数据到图表选项
            option.series[0].data = validData;

            // 使用新的选项设置图表
            myChart.setOption(option);
        }).fail(function (jqXHR, textStatus, errorThrown) {
            console.error('Error fetching data:', textStatus, errorThrown);
        });
    });

    // 声明并初始化 validData2 数组
    var validData2 = [];

    // 初始化第二个饼图
    var myChart2 = echarts.init(document.getElementById('chart2'));
    var option2 = {
        title: {
            text: '电影评分最高',
            left: 'center'
        },
        tooltip: {
            trigger: 'item' // 修改为 'item'
        },
        series: [
            {
                name: '评分',
                type: 'pie',
                radius: ['40%', '55%'], // 设置内外半径
                roseType: 'area', // 设置为面积模式
                data: [], // 初始为空数组
                label: {
                    show: true,
                    formatter: '{b}: {c} '
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: '30',
                        fontWeight: 'bold'
                    }
                }
            }
        ]
    };

    $(document).ready(function () {

        $.getJSON('../word/job2.json').done(function (data) {

            data.forEach(function (item) {
                var top = parseFloat(item.top);
                if (!isNaN(top)) { // 确保 top 是一个数字
                    validData2.push({
                        name: item.director,
                        value: top
                    });
                }
            });

            // 设置数据到图表选项
            option2.series[0].data = validData2;

            // 使用新的选项设置图表
            myChart2.setOption(option2);
        }).fail(function (jqXHR, textStatus, errorThrown) {
            console.error('Error fetching data:', textStatus, errorThrown);
        });
    });





    // 初始化echarts实例（可以在这里做，或者放在$(document).ready()内）
    var myChart3 = echarts.init(document.getElementById('chart3'));

    $(document).ready(function () {
        $.getJSON('../word/job5.json').done(function (data) {
            var categories = [], seriesData = [];
            data.forEach(function (item) {
                if (item.average && !isNaN(parseFloat(item.average)) && isFinite(item.average)) {
                    categories.push(item.director);
                    seriesData.push(parseFloat(item.average));
                }
            });

            // 构造option3，但是不要在这里设置series[0].data，因为我们稍后会设置
            var option3 = {
                title: {
                    text: '各导演平均评分柱状图'
                },
                tooltip: {
                    trigger: 'axis' // 如果你想显示详细数据，通常设置为'axis'
                },
                legend: {
                    data:['评分']
                },
                xAxis: {
                    data: categories // 直接在这里设置xAxis的data
                },
                yAxis: {},
                series: [{
                    name: '评分',
                    type: 'bar'
                    // 不要在这里设置data，稍后会设置
                }]
            };


            option3.series[0].data = seriesData; // 只需要设置series的data
            myChart3.setOption(option3);
        }).fail(function (jqXHR, textStatus, errorThrown) {
            console.error('Error fetching data:', textStatus, errorThrown);
        });
    });


    $(document).ready(function () {

        var myChart4 = echarts.init(document.getElementById('chart4'));

        var directors = [];
        var revenueData = [];
        var countData = [];

        $.getJSON('../word/job6.json').done(function (data) {
            data.forEach(item => {
                var director = item.director;
                var revenue = parseFloat(item.revenue);
                var count = parseInt(item.count);

                if (!directors.includes(director)) {
                    directors.push(director);
                    revenueData.push(0);
                    countData.push(0);
                }

                var index = directors.indexOf(director);

                revenueData[index] = (revenueData[index] || 0) + revenue;
                countData[index] = (countData[index] || 0) + count;
            });

            var option4 = {
                xAxis: {
                    type: 'category',
                    data: directors
                },
                yAxis: [
                    {
                        type: 'value',
                        name: '总票房',
                        axisLabel: {
                            formatter: '{value} 百万'
                        }
                    },
                    {
                        type: 'value',
                        name: '电影数',
                        axisLabel: {
                            formatter: '{value}部'
                        },
                        position: 'right'
                    }
                ],
                series: [
                    {
                        name: 'Revenue',
                        type: 'bar',
                        yAxisIndex: 0,
                        data: revenueData,

                    },
                    {
                        name: 'Count',
                        type: 'line',
                        yAxisIndex: 1,
                        data: countData
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表
            myChart4.setOption(option4);
        }).fail(function (jqXHR, textStatus, errorThrown) {
            console.error('Error fetching data:', textStatus, errorThrown);
        });
    });




</script>
</body>
</html>